<template>
  <div class="mt20">
    <div class="fb">基本信息</div>
    <zm-detail-table :list="baseInfoList" :info="tempInfoData">
    </zm-detail-table>
    <div v-if="infoData.checkStatus === '3'">
      <div class="mt20 fb">回款信息</div>
      <zm-detail-table :list="moneyBackList" :info="infoData"></zm-detail-table>
    </div>
    <div class="mt20">
      <div class="cf">
        <div class="fl fb">{{ infoTitle }}</div>
        <div class="fr" v-if="!isApproval">
          <span v-if="infoData.checkStatus === '3' && infoData.isActive === '0' && infoData.isClose === '0' && infoData.type !== '4'" class="mr5">等待激活</span>
          <zm-button size="mini" v-if="infoData.checkStatus === '3' && infoData.isActive === '1' && !['4', '6', '7'].includes(infoData.type)" @click="downExport">
            下载卡券
          </zm-button>
          <zm-button size="mini" v-if="infoData.checkStatus === '3' && infoData.isClose === '0' && infoData.isActive === '1'" @click="applyReturnGoods">
            <!-- && infoData.type !== '4' -->
            申请退款
          </zm-button>
        </div>
      </div>
      <zm-detail-table :list="productInfoList" :info="infoData" v-if="!['4', '6', '7'].includes(infoData.type)"></zm-detail-table>

      <div class="mt20 fb" v-if="form !== null">卡券赠送</div>
      <zm-detail-table v-if="form !== null" :list="base" :info="form"></zm-detail-table>

      <!-- 自定义金额的表 -->
      <div v-if="infoData.productType === '3' && infoData.isCustomize === '1'" class="mt20">
        <zm-table-data :data="infoData.customizePrice" :columns="customizePriceColumns" :show-page="false"></zm-table-data>
      </div>
    </div>
    <!-- 包场规则 旧数据 isNew === '0'-->
    <div class="mt20 detail-table" v-if="infoData.type === '4' && infoData.isNew === '0'">
      <div v-for="(item, index) in infoData.bookRule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <!-- <zm-detail-table :list="cinemaInfoList" :info="item"></zm-detail-table> -->
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ item['cinemaData']['relationType'] === '-1' ? '全部影院' : item['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + item['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type] || '--'}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(item, index)" v-if="item['cinemaData']['relationId'] !== '-1'">
                    点击查看
                  </a>
                  <span v-else>--</span>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <!-- 包场规则 新数据 isNew === '1'-->
    <div class="mt20 detail-table" v-if="infoData.type === '4' && infoData.isNew === '1'">
      <div v-for="(item, index) in infoData.bookRule.rule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <!-- <zm-detail-table :list="cinemaInfoList" :info="item"></zm-detail-table> -->
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ infoData.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : infoData.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + infoData.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(infoData.bookRule['cinemaData']['relationId'])" v-if="infoData.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{ infoData.bookRule['cinemaData']['relationName'] || '--' }}
                  </a>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <!-- 实物销售单 -->
    <div class="mt20 detail-table" v-if="infoData.type === '6'">
      <div class="fb mb10">产品信息</div>
      <zm-table-data :data="infoData.productList.list" :columns="productListColumns" :show-page="false"></zm-table-data>
    </div>
    <!-- 文旅规则 -->
    <div class="mt20 detail-table" v-if="infoData.type === '7'">
      <div v-for="(item, index) in infoData.wenlvRule.list" :key="index">
        <div class="mtb20 fb">{{'活动规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <span v-for="(item1, index1) in wenlvInfoList" :key="index1">
            <tr class="vm wp50" v-if="!(+item.calculationMethod === 2 && ['unitPrice', 'joinCount'].includes(item1.label))">
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ infoData.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : infoData.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + infoData.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(infoData.bookRule['cinemaData']['relationId'])" v-if="infoData.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{ infoData.bookRule['cinemaData']['relationName'] || '--' }}
                  </a>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>
    <down-card-coupon v-if="downVisible" v-model="downVisible" :info-data="infoData"></down-card-coupon>
    <!-- 客户详情 -->
    <detail-container v-if="customerVisible" v-model="customerVisible" :obj="detailObj" :id="customerId" type="Customer"></detail-container>
    <detail-container v-if="productVisible" v-model="productVisible" :id="productId"></detail-container>
    <!-- 退款 -->
    <return-operation v-if="returnVisible" v-model="returnVisible" :info-data="infoData" :order-id="businessId" :type="infoData.type" @after-return="freshDetail"></return-operation>
    <!-- 文旅退款 -->
    <return-wenlv-operation v-if="wenlvParams.visible" v-model="wenlvParams.visible" :obj="wenlvParams.obj" @after-return="freshDetail"></return-wenlv-operation>
    <!-- 影城 -->
    <cinema-detail v-if="cinemaParams.visible" v-model="cinemaParams.visible" :id="cinemaParams.id" :obj="cinemaParams.obj" :is-new="cinemaParams.isNew"></cinema-detail>
    <!-- 回执单 预览 -->
    <preview-panel v-if="previewParams.visible" v-model="previewParams.visible" :obj="previewParams.obj"></preview-panel>
    <!-- 实物销售单 退货 -->
    <return-product v-if="productParams.visible" v-model="productParams.visible" :obj="productParams.obj"></return-product>
  </div>
</template>

<script>
import {
  baseInfoList,
  moneyBackList,
  productInfoList,
  base,
  returnGoodsInfoList,
  customizePriceColumns,
  cinemaInfoList,
  wenlvInfoList,
  productListColumns
} from './const'
import { getProgramDetail } from '@/api/src/sendCouponSet'
import tableMixin from '@/mixins/zmTableMixin'
import ZmDetailTable from '@/components/zmDetailTable'
import DownCardCoupon from './DownCardCoupon'
import DetailContainer from '@/components/DetailContainer'
import ReturnOperation from './ReturnOperation'
import ReturnProduct from './returnProduct'
import ReturnWenlvOperation from './returnWenlvOperation'
import CinemaDetail from './CinemaDetail'
import { getCustomerType } from '@/api/src/customer'
import uploadApis from '@/api/src/upload'
import { editFile, receiptFile, receiptDownload } from '@/api/src/saleOrder'
import PreviewPanel from './previewPanel'

export default {
  components: {
    ZmDetailTable,
    DownCardCoupon,
    DetailContainer,
    ReturnOperation,
    ReturnProduct,
    ReturnWenlvOperation,
    CinemaDetail,
    PreviewPanel
  },
  mixins: [tableMixin],
  props: {
    infoData: {
      type: Object,
      default () {
        return {}
      }
    },
    linkInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    businessId: {
      type: String,
      default: ''
    },
    isApproval: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      downVisible: false,
      customerVisible: false,
      detailObj: {},
      customerId: '',
      productVisible: false,
      productId: '',
      returnVisible: false,
      customizePriceColumns: customizePriceColumns(this),

      tempInfoData: {},

      form: null, // 送券配置方案详情

      cinemaParams: {
        visible: false,
        obj: {},
        id: '',
        isNew: '0',
        idx: 0
      },
      previewParams: {
        visible: false,
        obj: false
      },
      productParams: {
        visible: false,
        obj: false
      },
      wenlvParams: {
        visible: false,
        obj: {}
      }
    }
  },
  computed: {
    baseInfoList () {
      return baseInfoList(this)
    },
    moneyBackList () {
      return moneyBackList(this)
    },
    productInfoList () {
      return productInfoList(this)
    },
    base () {
      return base(this)
    },
    returnGoodsInfoList () {
      return returnGoodsInfoList(this)
    },
    cinemaInfoList () {
      return cinemaInfoList(this)
    },
    wenlvInfoList () {
      return wenlvInfoList(this)
    },
    productListColumns () {
      return productListColumns(this)
    },
    infoTitle () {
      // productType 1兑换券，2卖品券，3点卡，4次卡，5优惠券
      let obj = {
        1: '券产品信息(电影券)',
        2: '券产品信息(卖品券)',
        3: '点卡产品信息',
        4: '次卡产品信息',
        5: '优惠券'
      }
      if (this.infoData.productType === '3') {
        return (
          obj[+this.infoData.productType] +
          (this.infoData.isCustomize === '1' ? '(自定义金额)' : '(统一金额)')
        )
      } else {
        return obj[+this.infoData.productType]
      }
    },
    saleOrderType () { // 销售单类型
      return this.infoData.type
    }
  },
  created () {
    this.init()
  },
  mounted () {
    if (this.infoData.id) {
      this.getInfo()
    }
  },
  methods: {
    init () {
      if (this.infoData.isSendProgram === '1') { this.getProgramDetailInfo() }
    },
    async getInfo () {
      const customerData = await getCustomerType({ id: this.infoData.customerId })
      this.tempInfoData = { ...this.infoData, ...{ customerTypeName: customerData.customerTypeName } }
    },
    goCustomerDetail (obj) {
      // 客户详情
      this.detailObj = {
        customerName: obj.customerName,
        id: obj.customerId
      }
      this.customerId = obj.customerId
      this.customerVisible = true
    },
    goProductDetail (productId) {
      // 调用产品详情
      this.productId = productId
      this.productVisible = true
    },
    applyReturnGoods () {
      if (this.infoData.type === '6') {
        this.productParams = {
          visible: true,
          obj: this.infoData
        }
      } else if (this.infoData.type === '7') {
        this.wenlvParams = {
          visible: true,
          obj: this.infoData
        }
      } else {
        // 退款
        this.returnVisible = true
      }
    },
    downExport () {
      // saleType 1纸质 2电子
      if (this.infoData.saleType === '1') {
        this.$message.info('您好！您的卡券已激活，请前往财务处领取纸质券卡')
      } else {
        this.downVisible = true
      }
    },
    freshDetail () {
      this.$emit('after-detail', true)
    },
    onCinemaDetail (item, index) {
      // 查看影院信息
      this.cinemaParams = {
        visible: true,
        isNew: this.infoData.isNew,
        id: this.infoData.isNew === '1' ? item : '',
        obj: this.infoData.isNew === '0' ? item.cinemaData : {},
        idx: index
      }
    },
    handleJSX (render) {
      return typeof render === 'function' ? { render } : render
    },
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      const _data = {
        orderId: this.infoData.id,
        enclosureUrl: res.url,
        enclosureUrlName: res.name
      }
      await editFile(_data)
      this.$emit('after-detail')
      return res.url
    },
    async receiptFileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      const _data = {
        orderId: this.infoData.id,
        receiptUrl: res.url
        // enclosureUrlName: res.name
      }
      await receiptFile(_data)
      this.$emit('after-detail')
      return res.url
    },
    async previewReceipt () {
      // 预览
      this.previewParams = {
        visible: true,
        obj: {
          id: this.infoData.id
        }
      }
    },
    async downReceipt () {
      // 下载
      const res = await receiptDownload({ id: this.infoData.id })
      this.$message.success('下载成功')
      if (!res.url) {
        this.$message.warning('没有找到下载的资料,确认是否有上传')
        return
      }
      const a = document.createElement('a')
      a.setAttribute('download', '')
      a.setAttribute('href', res.url)
      a.click()
    },
    async getProgramDetailInfo () {
      this.form = await getProgramDetail({ id: this.infoData.sendProgramId })
      console.log(this.form)
    }
  }
}
</script>
<style scoped lang="scss">
// @import '~styles/_size.css';
$color: #fafafa;
$height: 40px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;

      td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 40px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 30px;
  }
}
</style>
